<template>
  <div class="lcds-root-container">
    <ListView /><lc-rower>
      <lc-phone-number
        v-model="phoneNumber"
        class="lc-phone-number"
        :magnify="true"
        placeholder="请输入手机号"
      >
      </lc-phone-number>
    </lc-rower>
    <lc-rower>
      <lc-input-ic-card
        v-model="inputIcCard"
        class="lc-input-icCard"
        placeholder="请输入"
      >
      </lc-input-ic-card>
    </lc-rower>
    <p class="seg-title" style="margin-top: 200px">树形控件</p>
    <lc-tree
      v-model="tree"
      :config="treeTreeConfig"
      :tree-data="treeTreeData"
      @add-node="addNode"
      @delete-node="deleteNode"
      @allow-drop="allowDrop"
      @node-click="nodeClick"
    />
    <div class="lc-detail" style="--formItemSpace: 150px">
      <div class="lc-detail__inner">
        <el-form ref="detail" class="lc-form" :model="form" label-width="100px">
          <lc-rower> </lc-rower>
        </el-form>
      </div>
    </div>
    <lc-rower>
      <lc-input-identity-card
        v-model="inputIdentityCard"
        placeholder="请输入"
      ></lc-input-identity-card>
    </lc-rower>
    <p class="seg-title">金额输入框</p>
    <lc-rower>
      <lc-input-money-number
        class="lc-input-money"
        v-model="inputMoney"
        :clearable="true"
        placeholder="请输入"
        :disabled="false"
        :precisionValue="2"
        :templateType="{ type: 'prefix', value: '$' }"
      >
      </lc-input-money-number>
    </lc-rower>
    <lc-rower>
      <lc-magnifier class="lc-magnifier" :num="magnifierMagnifierData">
      </lc-magnifier>
    </lc-rower>
  </div>
</template>

<script setup>
import { ref, unref } from "vue";

import ListView from "./components/listView/index.vue";
import { request } from "@/apis/request";
import { NODE_CHECK } from "element-plus/es/components/tree-v2/src/virtual-tree.mjs";
defineOptions({
  name: "Gj9527",
});

const phoneNumber = ref("");
const inputIcCard = ref("");
const tree = ref([]);
const treeTreeConfig = ref({
  defaultProps: { children: "children", label: "label" },
  showCheckbox: false,
  expandAll: true,
  draggable: true,
  nodeKey: "id",
});
const treeTreeData = ref([
  {
    id: 1,
    label: "Level one 1",
    icon: "materials_plus",
    type: "edit",
    children: [
      {
        id: 11,
        label: "Level two 1-1",
        icon: "draggable",
        type: "delete",
        children: [
          {
            id: 111,
            icon: "materials_table_import",
            label: "Level three 1-1-1",
            type: "add",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    icon: "materials_plus",
    type: "add",
    children: [
      {
        id: 21,
        label: "Level two 2-1",
        icon: "draggable",
        type: "edit",
        children: [
          {
            id: 211,
            label: "Level three 2-1-1",
            icon: "materials_table_import",
          },
        ],
      },
      {
        id: 22,
        label: "Level two 2-2",
        icon: "draggable",
        type: "",
        children: [
          {
            id: 221,
            label: "Level three 2-2-1",
            icon: "materials_table_import",
            type: "delete",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    icon: "materials_plus",
    type: "",
    children: [
      {
        id: 31,
        label: "Level two 3-1",
        icon: "draggable",
        type: "edit",
        children: [
          {
            id: 311,
            label: "Level three 3-1-1",
            icon: "materials_table_import",
            type: "delete",
          },
        ],
      },
      {
        id: 32,
        label: "Level two 3-2",
        icon: "draggable",
        type: "",
        children: [
          {
            id: 321,
            label: "Level three 3-2-1",
            icon: "materials_table_import",
            type: "add",
          },
        ],
      },
    ],
  },
]);
const form = ref({});
const inputIdentityCard = ref("");
const inputMoney = ref(0);
const magnifierMagnifierData = ref("");

const detailQueryDetail = () => {
  const queryData = {};

  try {
    const params = { url: "", method: "get" };

    request({
      ...params,
      params: {
        ...queryData,
      },
    })
      .then((res) => {
        const data = res.data || {};
        Object.keys(data).forEach((key) => {
          unref(form)[key] = [null, undefined].includes(data[key])
            ? unref(form)[key]
            : data[key];
        });
      })
      .catch((error) => console.error(error.message));
  } catch (e) {
    console.error("! queryDetail error: ", e.message);
  }
};
detailQueryDetail();

const addNode = (type, value) => {
  if (type == "equal") {
    // 新增同级
  } else {
    // 新增下级
  }
  console.log("当前选中的node节点: ", value);
};

const deleteNode = (val) => {
  // 删除node节点
  console.log("当前选中的node节点: ", val);
};

const allowDrop = ({ prev, inner, fn }) => {
  // prev 拖拽的节点, inner 目标节点, level 层级
  // 拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。
  if (inner.level == prev.level) {
    fn(true);
  } else {
    fn(false);
  }
};

const nodeClick = (val) => {
  console.log("当前选中的node节点: ", val);
};
</script>

<style scoped>
.lcds-root-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
